<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom的增加和元素</title>
    <style>
        table,td{
            border: 1px solid #999;
        }
        td{
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <button type="button" onclick="add_line2()">添加一行</button>
    <button type="button" onclick="remove_line()">删除末尾</button>
    <div id="outer">
        <table>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <script>

        function add_line2(){
            //获取tbody对象
            let tbody = document.querySelector("#outer>table>tbody");
            //console.log(tbody.nodeName);//打印节点的名称

            //获取tbody中的原来的东西
            let old = tbody.innerHTML;

            let str = "<tr><td></td><td></td></tr>";
            
            old+=str;

            tbody.innerHTML = old;
            
        }

        function add_line(){
            //获取tbody对象
            let tbody = document.querySelector("#outer>table>tbody");
            //console.log(tbody.nodeName);//打印节点的名称

            //创建tr元素
            let tr = document.createElement("tr");

            for(let i=0;i<2;i++){
                let td = document.createElement("td");
                //将td对象绑定到tr标签
                //append - 文本/dom元素
                //appendChild - dom元素
                tr.appendChild(td);
            }
            //tr绑定到tbody
            tbody.appendChild(tr);
        }

        function remove_line(){
              //获取tbody对象
              let tbody = document.querySelector("#outer>table>tbody");

              //获取tbody的最后一个元素
              let last = tbody.lastElementChild;
              //直接删除
              tbody.removeChild(last);
        }
    </script>
</body>
</html>